<template>
    <div>
        <!-- 新增区域 -->
        <el-row type="flex" justify="end">
            <el-button
                @click="showDialog = true"
                type="primary"
                size="small"
                icon="el-icon-edit"
                >新增</el-button
            >
        </el-row>
        <!-- /新增区域 -->
        <!-- 表格区域 -->
        <el-table
            :data="list"
            :tree-props="{ children: 'childs', hasChildren: '' }"
            row-key="id"
            default-expand-all
            style="width: 100%"
        >
            <!-- 1标题 -->
            <el-table-column align="left" prop="title" label="标题">
                <template slot-scope="{ row }">
                    <i
                        class="menu_icon el-icon-folder-opened"
                        v-if="row.pid === null"
                    ></i>
                    <i
                        class="menu_icon el-icon-document"
                        v-if="row.pid !== null && !row.is_point"
                    ></i>
                    <i class="menu_icon el-icon-view" v-if="row.is_point"></i>
                    &nbsp;{{ row.title }}
                </template>
            </el-table-column>
            <!-- 1权限点代码 -->
            <el-table-column align="left" prop="code" label="权限点代码">
            </el-table-column>
            <!-- 1操作 -->
            <el-table-column align="left" label="操作" style="width: 200px">
                <template slot-scope="{ row }">
                    <el-button
                        @click="editHandler(row)"
                        size="small"
                        type="primary"
                        icon="el-icon-edit"
                        >修改</el-button
                    >
                    <el-button
                        @click="delHandler(row.id)"
                        size="small"
                        type="danger"
                        icon="el-icon-delete"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- /表格区域 -->
        <!-- 弹框区域 -->
        <el-dialog
            :title="formData.id ? '修改菜单' : '创建菜单'"
            :visible.sync="showDialog"
            @close="closeHandler"
        >
            <el-form
                v-if="showDialog"
                ref="form"
                :model="formData"
                :rules="formRules"
                label-width="200px"
            >
                <!--权限组名称(菜单,权限点)  -->
                <el-form-item label="权限组名称">
                    <el-radio-group
                        :disabled="formData.id ? true : false"
                        v-model="formData.is_point"
                        @change="changeFn"
                    >
                        <el-radio :label="false">菜单</el-radio>
                        <el-radio :label="true">权限点</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 权限组名称 -->
                <el-form-item label="权限组名称">
                    <el-input 
                    @input="inputHandler"
                    style="width: 400px" 
                    v-model="fakeData" 
                    placeholder="请选择" 
                   
                    @focus="showTree=true"/>
                        <el-collapse-transition>
                            <el-tree 
                            :expand-on-click-node='false'
                                v-if="showTree"
                                :data="permissinNameList"
                                default-expand-all
                                :props="{ label: 'title',value:'pid' ,children:'childs'}"
                                @node-click="selectNode"
                                />
                        </el-collapse-transition> 
                </el-form-item>
                <!-- 权限代码 -->
                <el-form-item prop="code" label="权限代码">
                    <el-input
                        style="width: 400px"
                        v-model="formData.code"
                    ></el-input>
                </el-form-item>
                <!-- 权限标题 -->
                <el-form-item prop="title" label="权限标题">
                    <el-input
                        style="width: 400px"
                        v-model="formData.title"
                    ></el-input>
                </el-form-item>
            </el-form>
            <el-row type="flex" justify="end">
                <el-button @click="showDialog = false" size="small" type=""
                    >取消</el-button
                >
                <el-button @click="btnOk" size="small" type="primary"
                    >确定</el-button
                >
            </el-row>
        </el-dialog>
        <!-- /弹框区域 -->
    </div>
</template>

<script>
import {
    getMenusListApi,
    getMenusInfoApi,
    updateMenusApi,
    delMenusApi,
    addMenusApi,
    treeToData
} from "@/api/menus";


export default {
    name: "MenusPage",
    data() {
        return {
            list: [],
            permissinNameList:[],
            showDialog: false,
            formData: {
              
                is_point: false,
                pid: "",
                code: "",
                title: "",
                id: "",
            },
            fakeData:"",
            treeToDataList:[],
            formRules: {
                code: [
                    {
                        required: true,
                        message: "请输入权限代码",
                        trigger: "blur",
                    },
                ],
                title: [
                    {
                        required: true,
                        message: "请输入权限标题",
                        trigger: "blur",
                    },
                ],
            },
            showTree:false, // 控制树形的显示或者隐藏 
        };
    },
    created() {
        this.initData();
    },
    methods: {
        // 选择权限点名称下拉框时触发事件函数
        selectNode(node){
            if(this.formData.is_point&&node.pid===null) {
                this.$message.error('此项非权限点,不可选')
                return this.$off('node-click')
            }
            // 避免添加按钮权限点(叶子节点)时,单选框选的是'菜单' 而不是'权限点'
            if(node.pid!==null&&this.formData.is_point===false){
                this.formData.is_point=true
            }
             this.formData.pid = node.id
             console.log(node.pid,node.id);
             this.fakeData= node.title
             this.showTree = false
        },
        inputHandler(){
            if(this.fakeData==='') this.showTree=false
        },
            // 新增或修改弹框中 切换菜单与权限点单选框时
        changeFn(){
            this.fakeData=''
            this.showTree=false 
        },
        async initData() {
            try {
                let res = await getMenusListApi();
                // console.log(res);
                // this.list = res;
                this.list = JSON.parse(JSON.stringify(res).replaceAll("points", "childs"));
                this.permissinNameList = res
                    console.log(this.list);
                    // 树形数据转成同级数据
                    this.treeToDataList = treeToData(this.list)

            } catch (error) {
                console.log(error);
            }
        },
        async btnOk() {
            try {
                // 改
                if (this.formData.id) {
                    await updateMenusApi(this.formData);
                } else {
                    // 增
                    await addMenusApi(this.formData);
                }
            } catch (error) {
                console.log(error);
            }

            this.$message.success("操作成功");
            this.showDialog = false;
            this.initData();
        },
        async editHandler(val) {
            // console.log(val);
            let res = await getMenusInfoApi(val.id);
            console.log(res);
            this.formData = res;
            this.treeToDataList.forEach(item=>{
                for (let k in item) {
                    if(k==='id'&&item[k]===res.pid){
                        this.fakeData = item.title
                    }
                }
            })
            this.showDialog = true;
        },
        async delHandler(id) {
            await this.$confirm("此操作将永久删除用户 , 是否继续?");
            await delMenusApi(id);
            this.$message.success("删除成功");
            this.initData();
        },
        closeHandler() {
            this.formData = {
                is_point: false,
                pid: '',
                code: "",
                title: "",
                id: "",
            };
            this.showTree=false
            this.fakeData =''
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table [class*=el-table__row--level] .el-table__expand-icon{
    margin-left: 0px;
    display: none;

}
::v-deep .menu_icon {
    font-size: 21px;
    vertical-align: middle;
}

::v-deep .el-icon-caret-right:before{
     display: none;
}
::v-deep .el-scrollbar__bar.is-horizontal{
    height: 0px;
    left: 0px;
     display: none;

}


</style>
